import React, { useEffect, useState } from 'react';
import { Checkbox, Drag, FixedNav, Image, InputNumber } from '@nutui/nutui-react-taro';
import Taro, { useLoad, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
// import { getCartList, data } from './cartApi';
import { getCartList } from '../../mock/cartApi';
import { Block, View } from '@tarojs/components';
import "../../assets/styles/flex.scss";
import "./index.scss";

const Cart = () => {
	const list = [
		{
			id: 1,
			text: '首页',
			icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png',
		},
		{
			id: 2,
			text: '分类',
			icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png',
		},
		{
			id: 3,
			text: '购物车',
			num: 2,
			icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png',
		},
		{
			id: 4,
			text: '我的',
			icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png',
		},
	];
	const [visible, setVisible] = useState(false);
	const [cartList, setCartList] = useState<any[]>([])
	const [allChecked, setAllChecked] = useState(false)
	const [loadInfo, setLoadInfo] = useState({
		pageIndex: 1,
		pageSize: 20
	})

	const [countInfo, setCountInfo] = useState({
		numCount: 0,
		priceCount: 0,
	})

	useLoad(() => {
		console.log('购物车加载')
		getCartList(loadInfo, (res) => {
			console.log('模拟的接口数据', res.data.content)
			setCartList(res.data.content)
		})
	})

	usePullDownRefresh(() => {
		console.log('页面下拉刷新')
	})

	useReachBottom(() => {
		console.log('页面到底')
		loadInfo.pageIndex += 1
		if (loadInfo.pageIndex > 10) {
			return
		}
		setLoadInfo(loadInfo)
		getCartList(loadInfo, (res) => {
			let newCartList = [...cartList, ...res.data.content]
			console.log(JSON.stringify(newCartList))
			setCartList(newCartList)
		})
	})

	useEffect(() => {
		let checked = true
		let numCount = 0
		let priceCount = 0
		for (let i in cartList) {
			if (!cartList[i].checked) {
				checked = false
			} else {
				numCount += 1
				priceCount += cartList[i].price * cartList[i].num
			}
		}
		setAllChecked(checked)
		setCountInfo({
			numCount,
			priceCount
		})
	}, [
		cartList
	])

	const change = (value: boolean) => {
		setVisible(value);
	};
	const selected = (item: any, event: React.MouseEvent<Element, MouseEvent>) => {
		console.log(item, event);
		if (item.id === 1) {
			Taro.redirectTo({ url: '/pages/index/index' });
		}
	};
	return (
		<>
			<Drag direction="y" style={{ right: '0px', bottom: '140px' }}>
				<FixedNav list={list} inactiveText="支持拖拽" visible={visible} onChange={change} onSelect={selected} />
			</Drag>
			<View className='cart-list'>
				{
					cartList.map((cart, cartIndex) => {
						return (
							<View className='cart-item flex-between' key={cart.id}>
								<View className='check-area flex-shrink-0 flex-col-center mr-1'>
									<Checkbox defaultChecked={false} checked={cart.checked} className='check' onChange={(e) => {
										console.log('checkbox点击了，', cartIndex)
										cartList[cartIndex].checked = !cartList[cartIndex].checked
										let newCartList = [...cartList]
										setCartList(newCartList)
									}}></Checkbox>
								</View>
								<View className='product-info flex-1 flex-between'>
									<View className='product-img flex-shrink-0 mr-2'>
										<Image mode='aspectFill' src={cart.img} className='img'></Image>
									</View>
									<View className='flex-1 flex-between flex-col'>
										<View>
											<View className='flex-between'>
												<View className='name flex-1 threelineText'>
													{cart.name}
												</View>
												<View className='flex-shrink-0 ml-1' onClick={() => {
													Taro.showModal({
														title: '是否移除？',
														success (res) {
															console.log(res)
															if (!res.confirm) {
																return
															}
															let newCartList = [...cartList]
															newCartList.splice(cartIndex, 1)
															console.log(newCartList)
															setCartList(newCartList)
														}
													})
												}}>
													<View className='iconfont icon-lajitong'></View>
												</View>
											</View>
											<View className='desc twolineText'>
												{cart.desc}
											</View>
										</View>
										<View className='flex-between mt-1'>
											<View className='flex-1 price'>
												￥{cart.price}
											</View>
											<View className='ml-1'>
												<InputNumber defaultValue={0} value={cart.num} allowEmpty={false} min={1} max={999999} disabled={!cart.checked} onChange={(e) => {
													console.log(e)
													cartList[cartIndex].num = Number(e)
													let newCartList = [...cartList]
													setCartList(newCartList)
												}}></InputNumber>
											</View>
										</View>
									</View>
								</View>
							</View>
						)
					})
				}
			</View>
			<View className='cart-bottom'>
				<View className='flex left flex-1 flex-between'>
					<View className='flex-col-center'>
						<Checkbox defaultChecked={false} checked={allChecked} onChange={() => {
							let checked = !allChecked
							let newCartList = cartList.map((item) => {
								item.checked = checked
								return item
							})
							setCartList(newCartList)
						}}></Checkbox>
					</View>
					<View className='price'>
						￥{countInfo.priceCount}
					</View>
				</View>
				<View className='submit flex-shrink-0 ml-1'>
					结算（{countInfo.numCount}）
				</View>
			</View>
		</>
	);
};
export default Cart;
